<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="#fff">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #343a45;"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center"></view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <!-- 页面主体 -->
    <view class="grace-body">
      <view class="ml-40 mr-40">
        <view class="grace-center" style="margin-top: 80rpx;">
          <image src="/static/logo.png" mode="widthFix" class="logo" />
        </view>
        <view class="title">{{ $t("account.forget.title") }}</view>
        <form @submit="forgetNow" class="grace-form" style="margin-top: 20rpx;">
          <view class="grace-form-item grace-border-b">
            <cloudIcon
              :name="category == 'mobile' ? ' iconshouji' : 'iconyouxiang'"
            ></cloudIcon>
            <view class="grace-form-body">
              <input
                :type="category == 'mobile' ? 'number' : 'text'"
                v-model="phoneno"
                placeholder-style="color:#BBBBBB;"
                class="grace-form-input font-28"
                name="mobile"
                :placeholder="
                  category == 'mobile'
                    ? $t('account.common.placeholder.phone')
                    : $t('account.common.placeholder.email')
                "
              />
            </view>
          </view>
          <view class="grace-form-item grace-border-b">
            <cloudIcon name="iconmima"></cloudIcon>
            <view class="grace-form-body">
              <input
                type="password"
                placeholder-style="color:#BBBBBB;"
                class="grace-form-input font-28"
                name="password"
                :placeholder="$t('account.forget.placeholder.password')"
              />
            </view>
          </view>
          <view class="grace-form-item grace-border-b">
            <cloudIcon name="iconmima"></cloudIcon>
            <view class="grace-form-body">
              <input
                type="password"
                placeholder-style="color:#BBBBBB;"
                class="grace-form-input font-28"
                name="password_confirmation"
                :placeholder="$t('account.forget.placeholder.confim')"
              />
            </view>
          </view>
          <view class="grace-form-item">
            <cloudIcon
              name="iconyanzhengma"
              style="font-size: 34rpx;"
            ></cloudIcon>
            <view class="grace-form-body">
              <input
                type="number"
                placeholder-style="color:#BBBBBB;"
                class="grace-form-input font-28"
                name="code"
                :placeholder="$t('account.common.placeholder.captcha')"
              />
            </view>
            <cloudSendCode
              style="flex-shrink: 0;"
              v-model="phoneno"
              type="password_reset"
              :category="category"
            >
            </cloudSendCode>
          </view>
          <view class="grace-margin-top">
            <button
              form-type="submit"
              type="primary"
              class="grace-button grace-border-radius font-36"
              :loading="loading['user.reset_password_by_code']"
            >
              {{ $t("account.forget.btn") }}
            </button>
          </view>
        </form>
      </view>
    </view>
  </cloudPage>
</template>

<script>
import { mapActions } from "vuex";
const graceChecker = require("../../graceUI/jsTools/graceChecker.js");
export default {
  data() {
    return {
      phoneno: "",
      category: ""
    };
  },
  onLoad({ category }) {
    this.category = category ?? "mobile";
  },
  methods: {
    ...mapActions("user", ["resetPassword", "resetPasswordByEmail"]),
    async forgetNow(e) {
      // 表单验证
      var rule = [
        {
          name: "mobile",
          checkType: "phoneno",
          errorMsg: this.$t("account.tips.mobile_not_right")
        },
        {
          name: "password",
          checkType: "string",
          checkRule: "8,",
          errorMsg: this.$t("account.tips.password_length", { length: 8 })
        },
        {
          name: "password_confirmation",
          checkType: "samewith",
          checkRule: "password",
          errorMsg: this.$t("account.tips.password_not_same")
        },
        {
          name: "code",
          checkType: "string",
          checkRule: "4,6",
          errorMsg: this.$t("account.tips.captcha_length")
        }
      ];
      var formData = e.detail.value;
      if (this.category == "email") {
        rule[0] = {
          name: "email",
          checkType: "email",
          errorMsg: this.$t("account.tips.mail_not_right")
        };
        formData.email = this.phoneno;
      } else {
        formData.mobile = this.phoneno;
      }
      var checkRes = graceChecker.check(formData, rule);
      // 验证通过
      if (checkRes) {
        if (this.category == "mobile") await this.resetPassword(formData);
        else await this.resetPasswordByEmail(formData);
        this.makeToast(this.$t("account.tips.forget_success"));
        setTimeout(() => {
          this.handleNavLogin();
        }, 1500);
      } else {
        this.makeToast({ title: graceChecker.error, icon: "none" });
      }
    }
  }
};
</script>

<style scoped>
page {
  background: #fff;
}
.iconfont {
  color: #999999;
  font-size: 32rpx;
}
.grace-border-b {
  border-bottom: 1rpx solid #dddddd;
}
.marginTop {
  margin-top: 100rpx;
}
.logo {
  width: 337rpx;
  height: 50rpx;
}
.title {
  margin-top: 104rpx;
  font-size: 38rpx;
  color: rgba(0, 0, 0, 1);
  line-height: 31px;
  position: relative;
  left: -16rpx;
}
.login-sendmsg-btn {
  height: 60rpx;
  width: 200rpx;
  flex-shrink: 0;
  margin-left: 30rpx;
  text-align: center;
  background-color: #3688ff;
  line-height: 60rpx;
  font-size: 26rpx;
}
.grace-pnper {
  width: 168rpx;
  flex-shrink: 0;
}
.grace-form-label {
  width: 168rpx;
}
.grace-form-input {
  text-align: left;
}
.grace-form-item {
  padding: 20rpx 0;
}
.grace-gtbg-blue {
  height: 100rpx;
  border-radius: 10rpx;
  line-height: 100rpx;
}
</style>
